<template>
    <div class="aside-btn" >
        <!-- <transition appear name="custom-classes-transition"
            enter-active-class="animate__animated animate__faster  animate__backInUp "
            leave-active-class="animate__animated animate__faster animate__backOutDown ">
            <div class="btn-container">
                <div class="build-item" v-for="(item, index) in floorList" @mouseenter="changebulid(index)"
                    :class="((item.build == NowFloor.build)) ? 'currentBuild' : ''" @mouseleave="changebulid(-1)">
                    {{ item.build }}
                    <div class="floor-container">
                        <div class="floor-item" v-for="(item1, index1) in item.floor" v-if="floorNum == index"
                            :class="(item.build == NowFloor.build && item1.floorName == NowFloor.floor) ? 'currentFloor' : ''"
                            @click="changefloor(item.build, item1.floorName)">
                            {{ item1.floorName }}
                        </div>
                    </div>
                </div>
            </div>
        </transition> -->
        <div class="floorBtn" @click="floorBtn">
            <img src='../../assets/image/楼层_选中.png' alt="">
            <span class="floortxt">F2</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useFloorStore } from '../../stores/floor'
import { useRoute } from 'vue-router';
import { commonApi, moniOpenLight,visualTo2F } from '@/api/common'
const floorBtn = async () => {
    let info = {
    eventName: '视角到2F',
    toguys: 'thingjs',
    }
    let res = await visualTo2F(info);
    console.log(res);
}
// const FloorStore = useFloorStore()
// const floorNum = ref(-1)
// const Route = useRoute()

// const changebulid = (i: any) => {
//     floorNum.value = i
// }

// const changefloor = (build: any, floor: any) => {


//     FloorStore.Setfloor({ build, floor })

// }

// const NowFloor = computed(() => {
//     return FloorStore.$state.floorNum
// })

// const floorList = [
//     {
//         build: 'A座', floor: [{ floorName: 'F5' }, { floorName: 'F6' }, { floorName: 'F7' },]

//     },
//     {
//         build: 'B座', floor: [{ floorName: 'F5' }, { floorName: 'F6' }, { floorName: 'F7' },]

//     },
//     {
//         build: 'C座', floor: [{ floorName: 'F5' }, { floorName: 'F6' }, { floorName: 'F7' },]

//     },
// ]
</script>

<style scoped lang="scss">
.aside-btn {
    position: absolute;
    left: 28vw;
    top: 75%;
    transform: translateY(-75%);
    z-index: 9;

    .floorBtn {
        position: relative;

        .floortxt {
            position: absolute;
            left: 50%;
            top: 25%;
            transform: translateX(-50%);
            color: #FFFFFF;
            font-weight: 900;
        }
    }

    .btn-container {
        display: flex;
        flex-direction: column;

        .build-item {
            position: relative;
            padding: 3px 20px 20px 20px;
            background: url('../../assets/image/楼栋.png') center no-repeat;
            background-size: 100% 100%;
            color: #FFFFFF;
            cursor: pointer;
            text-shadow: 0px 2px 4px #40DDFF;
            margin-bottom: 4px;

            .floor-container {
                cursor: default;
                position: absolute;
                left: 220%;
                top: -100%;
                transform: translateX(-100%);

                .floor-item {

                    cursor: pointer;
                    padding: 10px 31px 10px 31px;
                    box-sizing: border-box;
                    background: url('../../assets//image/楼层.png') center no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
    }



    .currentFloor {
        background: url('../../assets//image/楼层_选中.png') center no-repeat !important;
    }

    .currentBuild {

        background: url('../../assets//image/楼层_选中.png') center no-repeat !important;

    }
}</style>